<template>
  <div>
    <div class="demo-slider-line">
      <div class="d-title">常规样式</div>
      <div class="slider-box">
        <e-slider
          mark-simple
          :show-stop="false"
          v-model="value1"
          :marks="normalMarks" />
      </div>
    </div>

    <div class="demo-slider-line">
      <div class="d-title">指标为区间</div>
      <div class="slider-box">
        <e-slider
          mark-simple
          v-model="value2"
          range
          :marks="normalMarks" />
      </div>
    </div>

    <div class="demo-slider-line">
      <div class="d-title">禁用样式</div>
      <div class="slider-box">
        <e-slider
          mark-simple
          v-model="value3"
          disabled />
      </div>
      <div class="slider-box">
        <e-slider
          mark-simple
          v-model="value4"
          range
          disabled />
      </div>
    </div>
    
    <div class="demo-slider-line">
      <div class="d-title">带刻度</div>
      <div class="slider-special-box">
        <div class="content">
          <e-slider
            v-model="value5"
            :max="100"
            :mark-left = true
            :marks="specialMarks1"/>
        </div>
      </div>
    </div>

    <div class="demo-slider-line">
      <div class="d-title">带输入框</div>
      <div class="slider-special-box">
        <div class="content-type">
          <e-slider
            v-model="value6"
            :max="100"
            :marks="normalMarks"
            :markType=true
            show-input
            input-size="large"
            :tip-format="(val) => `${val}`" />
        </div>
        <div class="unit">单位</div>
      </div>
    </div>
  </div>
  <slider-md 
    class="markdown-body">
  </slider-md>
</template>

<script>
import { h }  from 'vue'
import sliderMd from '../../docs/slider.md';
export default {
  components: {
    sliderMd
  },
  data () {
    return {
      value1: 50,
      value2: [25, 65],
      value3: 50,
      value4: [25, 65],
      value5: 100,
      value6:10,
      normalMarks: {
        0: '0',
        100: '100'
      },

      specialMarks1: {
        0: '0',
        20: '20',
        40: '40',
        60: '60',
        80: '80',
        100: '100',
        30000: {
          style: {
            color: '#75849B',
            transform: 'translateX(-16px)'
          },
          label: h('normal', '30000')
        }
      }
    }
  }
}
</script>

<style scoped>
.demo-slider-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98,54,255,1);
}
.demo-slider-line {
  margin-bottom: 50px;
}

.demo-slider-line .slider-box {
  width: 341px;
  margin: 40px auto;
}
.slider-special-box {
  margin: 40px auto;
  text-align: center;
}
.slider-special-box .content {
  width: 339px;
  display: inline-block;
}

.slider-special-box .content-type {
  width: 311px;
  display: inline-block;
}
.slider-special-box .unit {
  display: inline-block;
  position: relative;
  left: 120px;
  bottom: 18px;
  font-size: 14px;
  color: #1F1F21;
  font-weight: 400;
}
</style>
